<template>
    <div class="main-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading="loading">
          <div class="top-title">审核广告</div>
            <el-form :model="dataForm" ref="dataForm" label-width="100px" class="form">
                <span class="title">广告类型与名称</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="广告类型">
                      <!-- <el-input :disabled="true" v-model="typeName"></el-input> -->
                      {{dataForm.advertType == '0' ? '积分商城顶部广告位' : dataForm.advertType == '1' ? 'e学云教育平台首页广告位' : dataForm.advertType == '2' ? 'APP全屏广告位' :''}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="广告名称">
                      <!-- <el-input :disabled="true" v-model="dataForm.advertName"></el-input> -->
                      <span>{{dataForm.advertName}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">广告创建时间与备注</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="创建时间">
                      <span>{{dataForm.createTime}}</span>
                      <!-- <el-input :disabled="true" v-model="dataForm.createTime" style="width:100%"></el-input> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="备注">
                      <!-- <el-input :disabled="true" v-model="dataForm.remark" style="width:100%"></el-input> -->
                      <span>{{dataForm.remark}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title" v-if="dataForm.appType">广告图片与指定位置</span>
                <span class="title" v-else>广告图片</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <div v-if="dataForm.advertPic !== null"><img class="bisWidthnew" :src="dataForm.advertPic" alt=""></div>
                    <div v-else-if="dataForm.iosOnePic !== null"><img class="bisWidthnew" :src="dataForm.iosOnePic" alt=""></div>
                    <div v-else-if="dataForm.androidPic !== null"><img class="bisWidthnew" :src="dataForm.androidPic" alt=""></div>
                    <div v-else-if="dataForm.iosTwoPic !== null"><img class="bisWidthnew" :src="dataForm.iosTwoPic" alt=""></div>
                    <div v-else><img class="bisWidthnew" :src="dataForm.iosThreePic" alt=""></div>
                  </el-col>
                  <el-col :span="10" v-if="dataForm.appType">
                    <el-form-item label="指定位置">
                      <span>{{dataForm.appType == 0 ? '教学App' : dataForm.appType == 1 ? '家庭App' : dataForm.appType == 2 ? '教学App和家庭App' :'--'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">广告链接与自定义内容</span>
                <el-row :gutter="41">
                  <el-col :span="21" style="font-size:14px">
                    <span class="img-width text-border panel-body" v-if="dataForm.showType =='1'" v-html="dataForm.html"></span>
                    <span class="img-width" v-else-if="dataForm.showType =='0'">链接：<a v-if="dataForm.link" :href="dataForm.link">{{dataForm.link}}</a> <span v-else>--</span></span>
                    <span v-else>无</span>
                  </el-col>
                </el-row>
                <span class="title">发布区域信息</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label-width="55px" label="省份">
                      <province :disabled="true" v-model="dataForm.provinceId"></province>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label-width="55px" label="城市">
                      <city :disabled="true" v-model="dataForm.cityId" :province="dataForm.provinceId" ></city>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label-width="55px" label="区县">
                      <region :disabled="true" v-model="dataForm.areaId" :city="dataForm.cityId" ></region>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="man-bom"></div>
                <span class="title">审核记录</span>
                <el-row :gutter="41">
                  <el-col :span="21">
                    <el-table :data="dataForm.lAudit" style="width: 100%">
                        <el-table-column prop="auditor" label="审核人"></el-table-column>
                        <el-table-column prop="checkTime" label="审核时间"></el-table-column>
                        <el-table-column prop="status" label="审核状态"></el-table-column>
                        <el-table-column prop="desc" label="审核描述"></el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <div class="man-bom"></div>
                <el-row type="flex" justify="center">
                    <el-col :span="3"><el-button @click="cancel">取消</el-button></el-col>
                    <el-col :span="3"><el-button @click="through" type="primary">通过并上线</el-button></el-col>
                    <el-col :span="3"><el-button @click="reject" type="warning">驳回</el-button></el-col>
                </el-row>
                <div class="man-bom man-bottom"></div>
            </el-form>
        </div>
        <!-- 审核弹出层 -->
        <layer-up :opinion="opinion"></layer-up>
    </div>
</template>

<script>
import Levelbar from '../../../layout/Levelbar';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import { getAdvertInfoById} from 'api/advApi';
import layerUp from './layerUp';
export default {
    name: 'getImgState',
    components: { Levelbar, province, city, region, layerUp },
    data() {
        return {
            dataForm: {},
            typeName: '',
            opinion: {
                dialogVisible: false,
                id: '',
                start: ''
            }
        };
    },
    created() {
        this.getImg(this.$route.params.id)
    },
    methods: {
        getImg(id) {
            this.loading = false;
            getAdvertInfoById(id).then(data => {
                this.loading = false;
                this.dataForm = data.data.content;
                this.typeName = this.dataForm.advertType == '0' ? '积分商城顶部广告位' : dataForm.advertType == '1' ? 'e学云教育平台首页广告位' : dataForm.advertType == '2' ? 'App全屏广告位' :'';
            }).catch(Error => {
                this.loading = false;
            })
        },
        cancel() {
            this.$router.go(-1);
        },
        // 通过并上线
        through() {
            this.opinion.dialogVisible= true;
            this.opinion.id = this.$route.params.id;
            this.opinion.start = '0'
            // auditAdvert(this.$route.params.id, '0').then(data => {
            //     this.$router.go(-1);
            // })
        },
        // 驳回
        reject() {
            this.opinion.dialogVisible= true;
            this.opinion.id = this.$route.params.id;
            this.opinion.start = '1'
            // auditAdvert(this.$route.params.id, '1').then(data => {
            //     this.$router.go(-1);
            // })
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../../../../static/tinymce/skins/lightgray/content.min.css";
.top-title{
    text-align: center;
    font-size: 18px;
    color: #333;
    height: 72px;
    line-height: 72px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}
.text-border{
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.img-width{
  display: block;
  max-width: 1050px;
}
.main-container {
  position: relative;
  padding: 20px 20px 10px;
}
.form-box{
    position: relative;
    padding: 0 50px;
    background: #fff;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.man-bom {
  padding: 20px 0 15px 0;
}
.man-bottom{
  margin-bottom: 20px;
}
.box {
  margin: 20px 0;
}
.title {
  position: relative;
  font-size: 14px;
  color: rgb(106, 85, 72);
  padding-left: 14px;
  margin: 30px 0;
  display: block;
  &::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: 0;
    top: 4px;
  }
}
.describe {
  font-size: 14px;
  color: #666;
  margin: 20px 0;
}
i {
  font-style: normal;
  color: #999;
}
.el-upload-new {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload-picture-new {
  border-radius: 6px;
  background-color: #fbfdff;
  border: 1px dashed transparent;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  i {
    font-size: 28px;
    color: #8c939d;
  }
}
.bisWidth{
  display: block;
  max-width: 1050px;
  overflow: hidden;
}
.bisWidthnew{
  display: block;
  max-width: 100%;
  overflow: hidden;
}
</style>